<template>
  <div v-if="messageConfig.show" class="message flex flex-s core-animate">
    {{ messageConfig.msg }}
  </div>
</template>

<script setup lang="ts">
  import { messageConfig } from './bus';
</script>

<style lang="scss" scoped>
  .message {
    position: fixed;
    min-width: 150px;
    height: fit-content;
    left: calc(50% - 75px);
    top: 40px;
    border: 2px solid #131313;
    background-color: #1a1a1a;
    padding: 12px;
    text-align: center;
    color: white;
    border-radius: 4px;
    z-index: 100;
  }
</style>
